<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameBar</title>
    <script src="vue.js"></script>
    <script src="zquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        hr {
            height: 2px;
            background-color: black;
        }

        #app {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: black;
        }

        .upperadjustment {
            height: 110px;
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .plusbutton {
            width: 30vw;
            height: 100%;
            text-align: center;
            user-select: none;
            background-color: rgb(2, 115, 25);
            font-size: 56px;
            color: white;
        }

        .plusbutton:active {
            background-color: rgb(0, 174, 35);
        }


        .msgdisplay {
            flex-grow: 1;
            height: 100%;
            text-align: center;
            color: white;
            font-family: fantasy;
            line-height: 110px;
        }


        .indicatorbar {
            height: 30px;
            padding-left: 10px;
            font-size: 15px;
            line-height: 30px;
            font-weight: bolder;
            color: white;
        }

        .predefine-container {
            overflow-x: hidden;
            overflow-y: scroll;

        }



        .tdpitem {
            width: 100%;
            height: 75px;
            border-bottom: solid rgb(86, 86, 86) 1px;
            font-size: 52px;
            font-family: fantasy;
            line-height: 75px;
            padding-left: 30px;
            user-select: none;
            color: lightgray;
        }

        .tdpitem:last-child {
            border-bottom: solid rgb(0, 0, 0) 1px;
        }

        .tdpitem:active {
            background-color: rgb(70, 70, 70);
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #0000003f;
            border-radius: 3px;
            width: 6px;
            height: 6px;
        }

        .alertdialog{
            position: fixed;
            z-index: 100;
            width: 100vw;
            height: 220px;
            transform: translateY(calc(50vh - 50%));
            background-color: black;
            border-top: solid rgb(2, 115, 25) 5px;
            border-bottom: solid rgb(2, 115, 25) 5px;
        }

        .dialoginner{
            width: calc(100% - 80px);
            height: clac(100% - 64px);
            padding-top: 40px;
            padding-bottom: 40px;
            padding-left: 32px;
            padding-right: 32px;
            text-align: center;
            font-family: fantasy;
            font-size: 24px;
            color: white;
        }
        .dialogbuttons{
            width: calc(100% - 50px);
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            padding-left: 25px;
        }
        
        .dialogbutton{
            font-size: 28px;
            font-family: fantasy;
            color: white;
            background-color: black;
            border: solid white 4px;
            width: 96px;
            height: 54px;
        }
        .dialogbutton:active{
            background-color: rgb(71, 71, 71);
        }

        .dialogbuttondanger{
            
            border: solid red 4px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="indicatorbar">TDP/功耗</div>
        <div class="upperadjustment">
            <button class="plusbutton" @click="tdpMinus">-</button>
            <div class="msgdisplay">
                <span style="font-size:75px;">{{currentTDP}}</span>
                <span style="font-size:13px;">Watt.</span>
            </div>
            <button class="plusbutton" @click="tdpAdd">+</button>
        </div>
        <div class="indicatorbar">GPU频率</div>
        <div class="upperadjustment">
            <button class="plusbutton" @click="gpuMinus">-</button>
            <div class="msgdisplay">
                <span style="font-size:44px;">{{currentGPU}}</span>
                <span style="font-size:13px;">MHz</span>
            </div>
            <button class="plusbutton" @click="gpuAdd">+</button>
        </div>

        <div style="flex-grow:1" class="predefine-container">

            <div class="indicatorbar">预设</div>
            <div class="tdpitem" v-for="item in preloadList" @click="applyPredefine(item)">
                <span>{{item.tdp}}</span>
                <span style="font-size:16px;">Watt.</span>
                <span>+</span>
                <span>{{item.gpu}}</span>
                <span style="font-size:16px;">MHz</span>
            </div>
            <div class="indicatorbar">小工具</div>
            <div class="tdpitem"
                style="font-family: sans-serif; display: flex; flex-direction: row; align-items: center;"
                @click="closegame">
                <div style="font-size:28px;">退出当前游戏&nbsp;</div>

                <div style="font-size:18px;">&nbsp;(Alt+F4)</div>
            </div>
        </div>

        <div class="alertdialog" v-if="showCloseDialog">
            <div class="dialoginner">
                <div>&nbsp;是否关闭当前游戏?<br>请注意保存进度</div>
            </div>
            <div class="dialogbuttons">
                <button @click="showCloseDialog = false" class="dialogbutton" >No</button>
                <button @click="doclosegame" class="dialogbuttondanger dialogbutton" >Yes</button>
            </div>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                currentTDP: 30,
                currentGPU: 1900,
                preloadList: [],
                throttledTimeout: null,
                showCloseDialog:false,
            },
            methods: {
                updateData() {
                    var tdpobj = { tdp: this.currentTDP, gpu: this.currentGPU };
                    $.ajax("api/tdp", tdpobj)
                        .then((result) => {
                            var resultObj = JSON.parse(result);
                            if (resultObj.code != 200) {
                                window.alert("修改失败：" + resultObj.msg);
                            }
                        })
                        .catch((err) => {
                            window.alert("修改失败：" + err);
                        });
                    localStorage.setItem("config", JSON.stringify(tdpobj));
                },
                updateDataThrottled() {
                    if (this.throttledTimeout != null) {
                        clearTimeout(this.throttledTimeout);
                        this.throttledTimeout = null;
                    }
                    this.throttledTimeout = setTimeout(() => {
                        this.throttledTimeout = null;
                        this.updateData();
                    }, 800);
                },
                gpuAdd() {
                    if (this.currentGPU < 2600) {
                        this.currentGPU += 50;
                        this.updateDataThrottled();
                    }
                },
                gpuMinus() {
                    if (this.currentGPU > 200) {
                        this.currentGPU -= 50;
                        this.updateDataThrottled();
                    }
                },
                tdpAdd() {
                    if (this.currentTDP < 30) {
                        this.currentTDP++;
                        this.updateDataThrottled();
                    }

                },
                tdpMinus() {
                    if (this.currentTDP > 4) {
                        this.currentTDP--;
                        this.updateDataThrottled();
                    }
                },
                applyPredefine(tdp) {
                    this.currentGPU = parseInt(tdp.gpu);
                    this.currentTDP = parseInt(tdp.tdp);
                    this.updateDataThrottled();
                },
                closegame() {
                    this.showCloseDialog = true;
                       
                    
                },
                doclosegame(){
                    this.showCloseDialog = false;
                    $.ajax("api/altf4", {})
                            .then((result) => {

                            })
                            .catch((err) => {

                            });
                }
                
            },
            mounted() {
                if (localStorage.getItem("predefine") == null) {
                    var predefined = [
                        { tdp: 30, gpu: 1850 },
                        { tdp: 22, gpu: 1600 },
                        { tdp: 15, gpu: 1200 },
                        { tdp: 6, gpu: 400 }
                    ];
                    localStorage.setItem("predefine", JSON.stringify(predefined));
                    this.preloadList = predefined;
                }
                else {
                    this.preloadList = JSON.parse(localStorage.getItem("predefine"));
                }
                if (localStorage.getItem("config") == null) {
                    var config = {
                        tdp: 28,
                        gpu: 1850,
                    };
                    localStorage.setItem("config", JSON.stringify(config));
                    this.currentGPU = config.gpu;
                    this.currentTDP = config.tdp;
                }
                else {
                    var config = JSON.parse(localStorage.getItem("config"));
                    this.currentGPU = config.gpu;
                    this.currentTDP = config.tdp;
                }
                this.updateDataThrottled();
            },
        });

    </script>


</body>

</html>